import React ,{useEffect,useState} from 'react'
import { Layout, Menu, Breadcrumb } from 'antd';
import {NavLink,Outlet} from "react-router-dom"
import {mainRouter} from "../router/RouterConfig"
import {
  DesktopOutlined,
  PieChartOutlined,
  FileOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
const { Header, Content, Footer, Sider } = Layout;

function getItem(label, key, icon,path, children) {
    const nav = path===""?label:<NavLink to={path}>{label}</NavLink>
    return {
      key,
      icon,
      children,
      label:nav,
    };
}
const items = [];
mainRouter.forEach((item,index)=>{
    !item.children?items.push(getItem(item.title,index,<TeamOutlined />,item.path,)) 
    :items.push(getItem(item.title,index,<PieChartOutlined/>,"",[
        getItem(item.children[0].title, index+3,<DesktopOutlined/>,item.children[0].path),
        getItem(item.children[1].title, index+10,<DesktopOutlined/>,item.children[1].path),
    ]))
}) 

function Index() {
    const [collapsed,setcollapsed] =useState(false)
    const onCollapse = (collapsed) => {
        setcollapsed(collapsed)
    };
    return (
        <div>
             <Layout
                style={{
                minHeight: '100vh',
                }}
            >
                <Sider  collapsible collapsed={collapsed} onCollapse={onCollapse}>
                <div className="logo" />
                    <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
                </Sider>
                <Layout className="site-layout">
                <Header
                    className="site-layout-background"
                    style={{
                    padding: 0,
                    }}
                />
                <Content
                    style={{
                    margin: '0 16px',
                    }}
                >
                    <Breadcrumb
                    style={{
                        margin: '16px 0',
                    }}
                    >
                    </Breadcrumb>
                    <div
                        className="site-layout-background"
                        style={{
                            padding: 24,
                            minHeight: 360,
                            width:"100%",
                            height:"100%",
                            overflow:"hidden"
                        }}
                        > 
                        <Outlet/>         
                    </div>
                </Content>
                <Footer
                    style={{
                    textAlign: 'center',
                    }}
                >
                    Ant Design ©2018 Created by Ant UED
                </Footer>
                </Layout>
            </Layout>
        </div>
    )
}

export default Index
